<!-- 表情 -->
<template>
  <div class="emjio-container">
    <div class="emjio-box">
      <div class="emjio-list" v-if="radio == 0">
        <div class="emjio" v-for="(item,index) in emojiList" :key="index" @click="$emit('handleEmotion',item)">
          <span id="emoji">{{ item }}</span>
        </div>
      </div>
      <div class="emoji-gif" v-if="radio == 1">
        <el-tooltip v-for="(item,index) in gifList" :key="index" :src="item.url" class="item" effect="dark" :content="item.name" placement="top-start">
          <img @click="$emit('handleGif',item.url)">
        </el-tooltip>
      </div>
    </div>
    <!-- <div class="emoji-bottom">
      <el-radio-group v-model="radio">
        <el-radio-button :label="0">
          <img src="../../../../assets/images/smile.png">
        </el-radio-button>
        <el-radio-button :label="1">
          <img src="../../../../assets/images/df_gif.png">
        </el-radio-button>
      </el-radio-group>
    </div> -->
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      radio: 0,
      emojiList: [
        '😀', '😁', '😂', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '😗', '😚', '😇', '😑', '😶', '😏', '😣',
        '😥', '😮', '😯', '😪', '😫', '😴', '😌', '😛', '😜', '😝', '😒', '😓', '😔', '😕', '😲', '😷', '😖', '😞', '😟',
        '😤', '😢', '😭', '😦', '😧', '😨', '😬', '😰', '😱', '😳', '😵', '😡', '👦', '👧', '👨', '👩', '👴', '👵', '👶',
        '👱', '👮', '👲', '👳', '👷', '👸', '💂', '🎅', '👰', '👼', '🙅', '🙋', '🙌', '🙏', '🚶', '🏃', '👯', '💃', '👫',
        '👬', '👭', '💏', '💑', '👪', '💪', '👈', '👉', '👆', '👇', '✌', '✋', '👌', '👍', '👎', '✊', '👊', '👋', '👏',
        '👐', '👣', '👀', '👂', '👃', '👅', '👄', '💋', '👓', '👔', '👕', '👖', '👗', '👘', '👙', '👚', '👛', '👜', '👝',
        '🎒', '💼', '👠', '👑', '👒', '💄', '💅', '💍', '🌂', '🙈', '🙉', '🙊', '🐵', '🐒', '🐶', '🐕', '🐩', '🐺', '🐱', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾', '🐈', '🐯', '🐅', '🐆', '🐴', '🐎', '🐮', '🐂', '🐃', '🐄', '🐷', '🐖', '🐗', '🐽', '🐏', '🐑', '🐐', '🐪', '🐫', '🐘', '🐭', '🐁', '🐀', '🐹', '🐰', '🐇', '🐻', '🐨', '🐼', '🐾', '🐔', '🐓', '🦆', '🦢', '🦜', '🦉', '🐣', '🐤', '🐥', '🐦', '🐧', '🐸', '🐊', '🐢', '🐍', '🐲', '🐉', '🐳', '🐋', '🐬', '🐟', '🐠', '🐡', '🐙', '🐚', '🐌', '🐛', '🐜', '🐝', '🐞', '🦋', '🌍', '🌎', '🌏', '🌐', '🌑', '🌒', '🌓', '🌔', '🌕', '🌖', '🌗', '🌘', '🌙', '🌚', '🌛', '🌜', '☀', '🌝', '🌞', '⭐', '🌟', '🌠', '☁', '⛅', '☔', '⚡', '❄', '🔥', '💧', '🌊'
      ]
    }
  },
  computed: {
    ...mapState({
      gifList: state => state.gifList
    })
  }
}
</script>
<style lang="scss">
.emjio-container {
  display: flex;
  flex-direction: column;
  height: 300px;
}
.emjio-list {
  display: flex;
  flex-wrap: wrap;
  .emjio {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      cursor: pointer;
      background: #ededed;
    }
    span {
      font-size: 18px;
    }
  }
}
.emjio-box {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.emoji-gif {
  img {
    float: left;
    width: 75px;
    height: 75px;
    &:hover {
      cursor: pointer;
      background-color: #ededed;
      border-radius: 5px;
    }
  }
}
.emoji-popper {
  padding: 0px !important;
  .popper__arrow {
    display: none;
  }
}
.emoji-bottom {
  height: 40px;
  background-color: #ededed;
  .iconfont {
    font-size: 24px;
  }
  .icon-xiaolian {
    color: #f8c350;
  }
  img {
    width: 25px;
    height: 25px;
  }
  .el-radio-button__inner {
    background: #ededed;
    border-radius: 0 !important;
    border: none;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    border-color: #fff;
    background: #fff;
    box-shadow: none;
  }
}
</style>
